<template>
  <div class="video-card">
    <div class="video-pic">
      <router-link
        :to="{ name: 'video', params: { uvid: videoObj.uvid } }"
        target="_blank"
      >
        <div class="video-cover-container">
          <el-image
            :fit="fit"
            class="video-cover"
            :src="videoObj.cover"
            lazy
          ></el-image>
        </div>
      </router-link>
      <div class="video-info">
        <span>
          <SvgIcon iconClass="video-play" class="yunnong-icon"></SvgIcon>
          {{ formatCountToStr(videoObj.viewCount) }}
        </span>
        <span>
          <SvgIcon iconClass="video-like" class="yunnong-icon"></SvgIcon>
          {{ formatCountToStr(videoObj.likedCount) }}
        </span>
        <span>
          <SvgIcon iconClass="video-time" class="yunnong-icon"></SvgIcon>
          {{ videoObj.duration }}</span
        >
      </div>
    </div>
    <router-link
      :to="{ name: 'video', params: { uvid: videoObj.uvid } }"
      target="_blank"
      class="title"
    >
      {{ videoObj.title }}
    </router-link>
    <router-link
      :to="{ name: 'account', params: { uuid: videoObj.uuid } }"
      target="_blank"
      class="up"
    >
      <SvgIcon iconClass="up" class="yunnong-icon"></SvgIcon>
      <div>{{ videoObj.userNickname }}</div>
    </router-link>
  </div>
</template>
<script>
import { formatCount } from "@/utils/date.js";
export default {
  props: {
    videoObj: {
      type: Object,
    },
  },
  data() {
    return {
      fit: "fill",
    };
  },
  computed: {},
  methods: {
    formatCountToStr(count) {
      return formatCount(count);
    },
  },
};
</script>
<style lang="scss" scoped>
.video-card {
  width: 300px;
  height: 285px;
  cursor: pointer;
  margin: auto;
  .video-pic {
    position: relative;
  }
  .video-cover-container {
    -moz-box-shadow: 10px -10px 5px #888888 inset;
    box-shadow: 0px -20px 20px black inset;
    width: 100%;
    height: 100%;
    .video-cover {
      width: 100%;
      height: 100%;
      border-radius: 2px;
      position: relative;
      z-index: -1;
    }
  }
}

.video-info {
  display: inline-flex;
  align-items: flex-end;
  justify-content: space-between;
  position: absolute;
  bottom: 0;
  padding: 6px 8px;
  color: #fff;
}

.video-info span {
  margin-right: 15px;
  font-size: 14px;
}

.title {
  display: block;
  line-height: 20px;
  margin: 10px 0 8px;
  height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-weight: 500;
  padding-right: 12px;
}

.up {
  display: flex;
  align-items: center;
  color: #999;
  line-height: 18px;
  font-size: 13px;
  color: #888888;
}

.up:link {
  color: #888888;
}

.up:hover {
  color: #11a3d6;
}

.yunnong-icon {
  margin-right: 4px;
  vertical-align: middle;
}
</style>
